<template>
    <div id="app">
        <el-container>
            <el-header class="dbudhl" height="200">
                <!-- log图 -->
                <div style="width: 70px; height: 70px;padding: 0 10px 0px 100px;">
                    <img src="../public/log1.jpg" alt="" style="border-radius: 50%;" width="100%" height="100%" />
                </div>
                <span style="padding: 0 50px 0px 10px;">
                    <h1 style="color: aliceblue;font-size: 30px;">瑶族</h1>
                </span>
                <span class="luyou">
                    <router-link to="/home">
                        <el-button type="danger" plain>首页</el-button>
                    </router-link>
                    <router-link to="/squ">
                        <el-button type="danger" plain>社区</el-button>
                    </router-link>
                    <router-link to="/about">
                        <el-button type="danger" plain>展馆</el-button>
                    </router-link>
                    <router-link to="/grzx">
                        <el-button type="danger" plain>个人中心</el-button>
                    </router-link>
                </span>

                <div style="flex: 1;">

                </div>

                <span class="ssk">
                    <span>
                        <el-input placeholder="请输入内容" prefix-icon="el-icon-search">
                        </el-input>
                    </span>
                </span>
                <span>
                    <el-button icon="el-icon-search" circle></el-button>

                    <!-- <el-dropdown split-button type="primary">
						设置
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>暂无内容</el-dropdown-item>
							<el-dropdown-item>暂无内容</el-dropdown-item>
							<el-dropdown-item>暂无内容</el-dropdown-item>
							<el-dropdown-item>暂无内容</el-dropdown-item>
							<el-dropdown-item>暂无内容</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown> -->
                </span>
            </el-header>
            <el-main style="margin: 0;padding: 0; position: fixed;
			width: 100%; height: 85%;top: 15%;
			">
                <router-view></router-view>
            </el-main>
        </el-container>
    </div>
</template>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /* text-align: center; */
        color: #ffffff;
        /* background-color: #464646; */
    }

    #app {
        padding: 0;
        margin: 0;

        background-position: center center;
        /* 背景图不平铺 */
        background-repeat: no-repeat;
        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
        background-attachment: fixed;
        /* 让背景图基于容器大小伸缩 */
        background-size: cover;
        /* 设置背景颜色，背景图加载过程中会显示背景色 */
        /* background-color: #464646; */
    }


    html {
        padding: 0;
        margin: 0;
        background-color: #eeeeee;
    }

    * {
        padding: 0;
        margin: 0;

    }

    .dbudhl {
        position: fixed;
        width: 100%;
        height: 15%;
        background-color: black;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .el-header {
        background: linear-gradient(to left, #88120a 0%, #b84a3c 100%);
        padding: 0;
        margin: 0;
    }

    a {
        color: #ffffff;
        padding: 10px;
    }

    .log {
        width: 30px;
        height: 30px;
        padding: 30px;
        margin: 30px;
        border-radius: 100%;
    }

    span {}


    .ssk {

        margin: 20px 10px;
    }

    .luyou {}
</style>